

<template>
    <div class="maskPanel">
        <section class="changePasswordView" >
            <p class="title_code">
                <span>是否修改密码</span>
                <i class="icon-close" @click="successChange"></i>
            </p>
        
            <p class='password'><label>密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码</label>
                <input type="password" autofocus="autofocus" v-model='firstPassword' ref="Input1" minlength = '6'  maxlength='6' class='verification-input' placeholder="请输入6位纯数字密码" />  
            </p>

            <p class='surePassword'><label>确认密码</label>
                <input type="password" placeholder="请再次输入密码" v-model='surePassword' ref="Input1"  minlength = '6'  maxlength='6' class='verification-input' />
            </p>

            <div class='button'>
                <span @click="confirmModify"  class="confirmBtn" >确认</span>
                <span @click="successChange" class="cancelBtn">放弃修改</span>
            </div>

        </section>
    </div>

</template>
<script>
import Vue from "vue";
import { Toast} from "mint-ui";
export default {
  data(){
        return{
            surePassword:'',
            firstPassword:'',
            isFinish:false
        }
  },
  components: {

  },
  computed:{

  },
  props:{
    showMask:{
        type:Boolean,
        default:false
    },
    statusChange:{
        type:Function,
        default:() => {}
    },
    successChange:{
        type:Function,
        default:() => {}
    },
    code:{
        type:String,
        default:''
    }
  },
  watch:{

  },
  mounted:function(){

  },
  methods:{
    changeMove:function(e){
        console.log(e);
        e.stopPropagation();

    },
    close:function(){
        console.log('close');
        this.$emit("update:showMask",false)
    },
    confirmModify:function () {

        if (!this.surePassword || !this.firstPassword) {
            Toast({
                message: "密码输入不能为空",
                position: "center",
                className: "toastStyle",
                duration: 1000
            });     
            return;
        }

        if (this.surePassword !== this.firstPassword) {
            Toast({
                message: "两次密码不同,请重新输入",
                position: "center",
                className: "toastStyle",
                duration: 1000
            });
            return;
        }

        console.log(this.code,'this.code');
        var params = {
            password:this.surePassword,
            verificationCode:this.code
        };

        this.Axios
            .Post(this.URL.updatePsd.url,params)
            .then(res => {
                var code = res.data.datas;
                if (code == 10007) {
                    this.statusChange('100003')
                } else {
                    Toast({
                        message: res.data.message || '密码修改失败',
                        position: "center",
                        className: "toastStyle",
                        duration: 1000
                    })
                    return;            
                }

            });
    
    },
    cancelModify:function(){
        this.successChange();
    }

  }
}
</script>
<style lang="less" scoped>
    .maskPanel{
        position:fixed;
        top:0;
        bottom:0;
        left:0;
        right:0;
        background-color: #7E7E7E;
        z-index:1000;
    }
  .changePasswordView {
    overflow: hidden;
    background-color:#fff;
    position: absolute;;
    bottom:0px;
    margin:auto auto;
    top:0px;
    height:4rem;
    width:90%;
    left:0;
    right:0;
    border-radius: 0.08rem;
    text-align:center;
    .password,
    .surePassword {
      text-align: left;
      width: 70%;
      margin: 0 15%;
      border-bottom: 1px solid rgb(206, 206, 206);
      height: 0.6rem;
      line-height: 0.6rem;
      overflow: hidden;
      label {
        width: 1.2rem;
        float: left;
        margin-right: 0.2rem;
      }
    }

    .button {
      padding-top: 0.4rem;
      padding-bottom: 0.4rem;
      .confirmBtn{
          display:inline-block;
          width:1.5rem;
          height:0.6rem;
          line-height:0.6rem;
          text-align:center;
          background-color: #027de5;
          color:#fff;
          border-radius:0.1rem;
      }
      .cancelBtn{
          display:inline-block;
          width:1.5rem;
          height:0.6rem;
          line-height:0.6rem;
          text-align:center;
          background-color: #a4b7c9;
          color:#fff;
          border-radius:0.1rem;
          margin-left:0.1rem;
      }
    }
    input{
        outline: none; 
        height:0.6rem; 
        padding-left:0.16rem;
        padding-top:0;
        padding-bottom:0;
        border:none;
        width:64%;
        vertical-align: top;
    }

    .title_code{
        height: 1rem;
        line-height: 1rem;
        position: relative;
        margin-bottom:0.2rem;
    }
    .title_code i{
        position: absolute;
        right:0.3rem;
        top:0.34rem;
        font-size:0.32rem;
        color: rgb(148, 142, 142);
    }
  }
</style>

             
             
             
             
